<template>
	<statusBarVue title="邀请得U豆" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="u-coin-page" :style="pageHaveBarStyle">
		<view class="income">
			<view class="tit">
				<text class="lt">我的收益</text>
				<view class="rt">
					收益记录
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="nums">
				<view class="num">
					<text>6</text>
					<view class="label">邀请好友</view>
				</view>
				<view class="num">
					<text>351</text>
					<view class="label">赚取U豆</view>
				</view>
				<view class="num">
					<text>280</text>
					<view class="label">朋友帮赚</view>
				</view>
			</view>
			<view class="my-num">
				<view class="value">
					我的U豆
					<text class="val">93,449</text>
				</view>
				<button class="goShopping">
					去消费
				</button>
			</view>
		</view>
		<view class="code-con">
			<view class="tit">邀请得U豆，成单就返现</view>
			<view class="code">
				<view class="code-label">
					<text class="text">你的邀请码</text>
					<icon class="item"></icon>
				</view>
				<view class="val">932039248934</view>
				<view class="copy">点击可复制</view>
			</view>
			<view class="footer">
				<view class="u-rule" @click="open">
					U豆规则 <icon class="icon icon-help"></icon>
				</view>
				<view class="u-rule">
					返现规则 <icon class="icon icon-help"></icon>
				</view>
			</view>
		</view>

		<!-- U豆使用规则 -->
		<uni-popup ref="ruleTextDialog" type="dialog">
			<view class="rule-popup">
				<view class="tit">U豆使用规则</view>
				<view class="rule-content">
					参与活动的对象：通过身份认证审核注册用户；<br/>
					邀请他人注册并通过身份认证审核后，邀请人可获得邦豆奖励；<br/>
					具体规则如下：<br/>
					你推荐的工程师（A）注册并通过认证后，你得200邦豆。<br/>
					你推荐工程师（A）再推荐另外一工程师（B）注册并通过认证后，你得100U豆，A得200U豆。<br/>
					如果工程师（B）再推荐（C）注册并通过认证后，你可以50U豆，A得100U豆，B得200U豆。<br/>
					<br/>
					本次活动解释权归水电邦平台；
				</view>
				<view class="rule-footer">
					<button @click="close">我知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';
	import {
		publics
	} from '@/mixins/publics.js';
	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		methods: {
			open() {
				this.$refs.ruleTextDialog.open('center')
			},
			close() {
				this.$refs.ruleTextDialog.close()
			}
		}
	}
</script>

<style lang="scss">
	.u-coin-page {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #F5F6FA;
		border-radius: 12px 12px 0 0;

		.income {
			width: 100%;
			height: 210px;
			background-image: linear-gradient(180deg, #D1F3DB 0%, #FFFFFF 32%);
			box-shadow: inset 0 1px 0 0 #FFFFFF;
			border-radius: 12px 12px 0 0;
			padding: 15px 20px;
			box-sizing: border-box;
			margin-bottom: 14px;

			&>.tit {
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 15px;
				color: #2C2C2C;
				overflow: hidden;
				border-bottom: 1px solid rgba(151, 151, 151, 0.2);
				padding-bottom: 10px;

				.rt {
					opacity: 0.4;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 14px;
					color: #2C2C2C;

					.uni-icons {
						vertical-align: bottom;
					}
				}
			}

			.nums {
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 22px;
				color: #2C2C2C;
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 21px 0 24px;

				.label {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 12px;
					color: #595959;
					margin-top: 8px;
				}
			}

			.my-num {
				width: 91.2vw;
				height: 44px;
				background: #F2FAF5;
				border-radius: 22px;
				margin: auto;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 12px;
				color: #595959;
				padding: 14px 0 14px 18px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.val {
					font-family: PingFangSC-SNaNpxibold;
					font-weight: bold;
					font-size: 20px;
					color: #2C2C2C;
					margin-left: 8px;
				}

				.goShopping {
					margin: 0;
					width: 80px;
					height: 38px;
					background: #22A366;
					border-radius: 22px;
					color: #fff;
					font-family: PingFangSC-SNaNpxibold;
					font-weight: bold;
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.code-con {
			.tit {
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 16px;
				color: #22A366;
				text-align: center;
				margin-bottom: 14px;
			}

			.code {
				width: 94.67vw;
				height: 164px;
				background: #FFFFFF;
				border-radius: 8px;
				text-align: center;
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				color: #2C2C2C;
				padding: 18px 0 17px;
				box-sizing: border-box;
				margin: auto;

				.code-label {
					height: 18px;
					font-size: 16px;
					margin-bottom: 25px;
					position: relative;

					.item {
						display: inline-block;
						content: '';
						width: 92px;
						height: 8px;
						background: #22A366;
						position: absolute;
						bottom: -1px;
						left: 0;
						right: 0;
						margin: auto;
						z-index: 1;
					}

					.text {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						z-index: 2;
					}
				}

				.val {
					font-size: 24px;
					margin-bottom: 30px;
				}

				.copy {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 14px;
					color: #2C2C2C;
					opacity: 0.6;
				}
			}

			.footer {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 14px;
				color: #1E1F23;
				margin-top: 21px;

				.icon-help {
					width: 12px;
					height: 12px;
					background: url("/static/images/icon/help.png") no-repeat 0 0;
					background-size: 100% 100%;
				}
			}
		}

		.rule-popup {
			width: 88.53vw;
			border-radius: 12px;
			padding: 0 4px;
			box-sizing: border-box;
			background-color: #fff;
			text-align: center;

			.tit {
				width: 193px;
				height: 46px;
				line-height: 46px;
				background: #22A366;
				box-shadow: 0 2px 4px 0 #117c4954;
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 16px;
				color: #FFFFFF;
				margin: auto;
				position: relative;
				top: -4px;
			}

			.rule-content {
				height: 50vh;
				overflow: auto;
				padding: 18px 18px 0;
				text-align: left;
				color: #000000;
				box-sizing: border-box;

				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
			}

			.rule-footer {
				padding: 20px 18px 24px;

				button {
					background: #22A366;
					border-radius: 8px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 17px;
					color: #FFFFFF;
				}

			}
		}
	}
</style>